<template>
  <div class="look-vote-detail">
    <head-top head-title="票数详情" hidden='true' go-back="true"></head-top>
    <div class="fixed">
      <div class="areas-name">{{title}}</div>
      <div>
        <ul class="navbar">
          <li class="nav-item" v-for="(item, index) in dataList" :key="index" @click="showContainer(index)"><span :class="{'item': i===index}">{{item.name}}({{item.count || 0}})</span></li>
        </ul>
      </div>
    </div>
    <div class="vote">
      <div v-show="i === 0">
        <div>
          <div class="text border-bottom"  @click="showIntelItem">
            <span>网络投票</span>
            <span class="arrow">{{intelList.length}}票&nbsp;＞</span>
          </div>
          <transition name="intel"> 
            <ul class="toupiao-wrapper zindex" v-show="intelShow">
              <li class="tou-wrapper border-bottom-last" v-for="(item,key) in intelList" :key="key">
                <div class="left">{{item.name}}室</div>
                <div class="right intel" @click="noCancle(item.id)">
                  <div class="yi-color">已投</div>
                  <input class="yi-input"  type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
                  <label :for="item.id"></label>
                </div>
              </li>
            </ul>
          </transition>
        </div>
        <div>
          <div class="text"  @click="showOtherItem">
            <span>其他投票</span>
            <span class="arrow">{{otherList.length}}票&nbsp;＞</span>
          </div>
          <transition name="other"> 
            <ul class="toupiao-wrapper" v-if="otherShow">
              <li class="tou-wrapper border-bottom-last" v-for="(item,key) in otherList" :key="key">
                <div class="left">{{item.name}}室</div>
                <div class="right" @click="cancleVote(item.id, item.name)">
                  <div class="yi-color">已投</div>
                  <input class="yi-input"  type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
                  <label :for="item.id"></label>
                </div>
              </li>
            </ul>
          </transition>
        </div>
      </div>
      <ul class="toupiao-wrapper" v-show="i === 1">
          <li class="tou-wrapper border-bottom-last" v-for="(item,index) in sendList" :key="index">
            <div class="left">{{item.name}}室</div>
            <div class="right" @click="cancleVote(item.id, item.name)">
              <div class="yi-color">已送票</div>
              <input class="yi-input"  type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
              <label :for="item.id"></label>
            </div>
          </li>
        </ul>
      <ul class="toupiao-wrapper" v-show="i === 2">
          <li class="tou-wrapper border-bottom-last" v-for="(item,index) in recycleList" :key="index">
            <div class="left">{{item.name}}室</div>
            <div class="right" @click="cancleVote(item.id, item.name)">
              <div class="yi-color">已回收</div>
              <input class="yi-input"  type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
              <label :for="item.id"></label>
            </div>
          </li>
        </ul>
    </div>
  </div>
</template>

<script>
import headTop from '../header/Header.vue'
import {lookVote, deleteVote} from '../../api/toupiaotongji.js'
import {Toast, MessageBox} from 'mint-ui'
export default {
  name: 'LookVoteDetail',
  data() {
    return {
      dataList: [{'name': '已投票'}, {'name': '已送票'}, {'name': '已回收'}],
      i: 0,
      j: 0,
      intelList: [],
      otherList: [],
      sendList: [],
      recycleList: [],
      intelShow: false,
      otherShow: false,
      title: ''
    }
  },
  components: {
    headTop
  },
  created() {
    this._lookVote()
  },
  methods: {
    showContainer(index) {
      this.i = index
    },
    _lookVote() {
      lookVote(this.$route.params.did, this.$route.params.vid).then(res => {
        if (res.code === 200) {
          this.sendList = res.data.giveVote
          this.recycleList = res.data.alreadyVote
          this.intelList = res.data.intelVote
          this.otherList = res.data.otherVote
          this.title = res.data.title
          var voteLength = [(this.otherList.length + this.intelList.length), this.sendList.length, this.recycleList.length]
          this.dataList.forEach((item, index) => {
            this.$set(item, 'count', voteLength[index])
          })
        }
      })
    },
    showIntelItem() {
      this.intelShow = !this.intelShow
      if (this.intelShow) {
        this.otherShow = false
      }
    },
    showOtherItem() {
      this.otherShow = !this.otherShow
      if (this.otherShow) {
        this.intelShow = false
      }
    },
    cancleVote(id, name) {
      MessageBox({
        title: '提示',
        message: `你确定取消${name}室状态？`,
        showCancelButton: true,
        cancelButtonText: '放弃'
      }).then(action => {
        if (action === 'confirm') {
          deleteVote(id).then(res => {
            if (res.code === 200) {
              Toast({
                message: '取消成功',
                position: 'middle',
                duration: 1000
              })
              this._lookVote()
            } else {
              Toast({
                message: '取消失败',
                position: 'middle',
                duration: 1000
              })
            }
          })
        }
      })
    },
    noCancle(id) {
      Toast({
        message: '网络投票不能取消',
        position: 'middle',
        duration: 1000
      })
    }
  }
}
</script>

<style lang="scss">
  .look-vote-detail {
    .fixed{
      width: 100%;
      position: fixed;
      top: 40px;
      left: 0;
      z-index: 2;
      .areas-name{
        padding: 0 10px;
        width: 100%;
        height: 30px;
        line-height: 30px;
        background-color: #f2f2f2;
      }
      .navbar {
        width: 100%;
        display: flex;
        height: 40px;
        line-height: 40px;
        background-color: #fff;
        .nav-item{
          flex: 1;
          height: 100%;
          text-align: center;
          border-bottom: 2px solid #f2f2f2;
          font-size: 13px;
          .item{
            display: inline-block;
            height: 100%;
            padding:0 10px;
            border-bottom: 2px solid #0078de;
            color: #0078de;
          }
        }
      }
    }
    .vote {
      padding-top: 110px;
      .text{
        padding: 0 10px;
        height: 35px;
        line-height: 35px;
        background-color: #f2f2f2;
        position: relative;
        span{
          &:nth-of-type(1) {
            font-size: 13px;
          }
        }
        .arrow{
          float: right;
          font-size: 15px;
          color: #888;
        }
      }
      .zindex{
        z-index: 3;
      }
      .toupiao-wrapper{
        -webkit-overflow-scrolling: touch;
        // position: relative;
        background-color: #fff;
        .tou-wrapper{
          margin:0 10px;
          height: 44px;
          line-height: 44px;
          font-size: 16px;
          .left{
            display: inline;
            text-align: left;
          }
          .right{
            font-size: 14px;
            text-align: right;
            position: relative;
            top: -42px;
            height: 44px; 
            input[type='checkbox'] {display: none}
            label { position: absolute; right: -8px; top: 12px;}
            label:before { content: ''; position: absolute; left: -30px; top: 0; width: 16px; height: 16px; border: 1px solid #ddd; border-radius: 50%; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; }
            label:after { content: ''; position: absolute; left: -23px; top: 3px; width: 4px; height: 10px; border: 0; border-right: 1px solid #fff; border-bottom: 1px solid #fff; background: #fff; transform: rotate(45deg); transition: all 0.3s ease;}
            input[type='checkbox']:checked + label:before { background: #0087de; border-color: #0087de; }
            input[type='checkbox']:checked + label:after { background: #0087de; }
            .yi-color{
              color: #000 !important;
              margin-right: 25px;      
            }
          }
        }
      }
    }
  }
</style>
